body {
 font-family: 'Zen Kaku Gothic New', sans-serif;
  background-color: #fbe5cb;
  color:#8c6b5e;
}


:lang(en) {
  font-family: "Athelas", serif;
  font-style: normal;
  font-weight: 300; /* 英語だけ太めに */
}

:lang(en2) {
  font-family: "Athelas", serif;
  font-style: italic;
  font-weight: 600; /* 英語だけ太めに */
}


h1{
  font-family: "Athelas", serif; /* macOS・iOSでAthelas */
  font-style: italic;
  font-weight: 600;
}

.innerWrap{
    border: 4px solid lightblue;
    width:1000px;
    margin:0 auto;
    padding: 80px 20px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;       /* 画面全体に高さを合わせる */
  box-sizing: border-box;
}


body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #fbe5cb;
  padding-top: 90px; /* ヘッダー位置50px + 高さ40px */
}


/* 背景だけ */
.header-bg {
  background-color: #fbe5cb;
  height: 0px; /* 見た目の高さだけ */
  position: relative;
}

/* ハンバーガー配置 */
.hamburger-wrap {
  width: 1000px;             /* コンテンツ幅を1000pxに */
  margin: 0 auto;
  height: 60px;
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: center;
  box-sizing: border-box;

  position: relative;         /* absolute は不要になる */
}

.hamburger {
display: none;
}


/* ページ全体の余白をリセット */
body {
  margin: 0;
  padding: 0;
}


/* 細い帯 */
.header-line {
  height: 20px;
  background-color: #d8c0a4;
}

/* プルダウンメニュー */
.nav-menu {
  display: flex;              /* 横並びに */
  flex-direction: row;        /* 横方向 */
  gap: 50px;                  /* 項目の間隔 */
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;           /* 背景色を外す */
  position: static;           /* 絶対配置を解除 */
}


.nav-menu li {
  margin: 0;
}

.nav-menu a {
  color: #bc8a69; 
  text-decoration: none;
  padding: 10px 0;
}

.nav-menu a:hover {
  color: #ffffff;
}


h2{
text-align: center;
color:#bc8a69;
font-size: 40px;
margin-top:100px;
position:relative;
}

h2::after{
    content:"";
    display: block;
    background-color:#bc8a69;
    height:4px;
    width: 150px;
    margin:10px auto 0;
}

.fade-in {
  opacity: 0;
  transform: translateY(30px); /* 下から少し移動 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* 1秒でゆっくり */
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}




/*about me*/
.About-me {
  padding: 70px 20px 0;
  width: 1000px; /* 画面幅の120%に */
  margin: 100px auto 0; /* 上100px、左右autoで中央揃え */
  box-sizing: border-box;
  position: relative; 
  background-color:#f9ecdc;
  border:5px solid #c9a635;
  border-radius: 40px 40px 40px 40px;
  display: flex;
  gap: 30px;          /* カード同士の間隔 */
  justify-content: center; /* 横方向の配置 */
  align-items: stretch; /* 高さ揃えたいなら */
   max-width: 1000px; /* 横幅の最大値を指定すると綺麗 */
}


.about-me{
  margin-top:100px ;
}

.profile {
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  gap: 30px; /* 写真とテキストの間隔 */
  margin: 50px auto; /* 上下余白50px、左右中央寄せ */
  justify-content: center; /* 横方向中央揃え */
}


.profile-text {
  max-width: 400px; /* テキスト幅を制限 */
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url("images/Pari.JPG");
  background-size: 250%;
  background-position: 20% 70%;
  margin-top:80px;
}

.name {
  font-size: 30px;
  color: #8c6b5e;
  margin: 80px 0 10px 50px;
}

.text-box {
  font-size: 16px;
  text-align: justify;
  line-height: 1.5;
  margin: 10px 0 0px 50px;
}



.flower {
  position: absolute;
  left: -20px; /* サークルより左へ */
  top: 50%;     /* サークルの縦中央に合わせる */ 
  width: 150px; /* 花の大きさ */
  height: auto;
  pointer-events: none; /* 飾りなのでクリック不可 */
  transform: scaleX(-1) rotate(200deg); 
}

.sp1,.sp2,.sp3 {
  position: relative; /* 子要素の絶対配置の基準に */
  margin-bottom: 50px; /* 各ブロックの間隔 */
}


.number {
  position: absolute;
  top: -40px;   /* 親要素の上から */
  left: -10px;  /* 親要素の左から */
  font-size: 30px;
  font-weight: bold;
  color: #bc8a69;
}



.StrongPoint{
 color:#bc8a69;
  font-size:40px;
  margin-top:180px;
  margin-bottom: 10px;
  text-align:left;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto; /* ← これでブロック自体を中央配置 */
}

.a{
  font-size:16px;
  margin-top:0;
  text-align:left;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto; /* ← これでブロック自体を中央配置 */
}


.strong-point1{
  font-size:20px;
  font-weight:700;
  color: #8c6b5e;
  text-align: center;
}

.text-box1 {
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
  text-align: justify;
  text-justify: inter-ideograph;
  font-family: 16px;

  /* 左右中央配置 */
  margin: 0 auto; /* これだけで左右中央に */
}


.Strong-point2 {
  display: flex;
  justify-content: center; /* 横中央揃え */
  margin: 50px;
}



.strong-point2{
  font-size:20px;
  font-weight:700;
  color: #8c6b5e;
  text-align: center;
}

.text-box2 {
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
  text-align: justify;
  text-justify: inter-ideograph;
  font-family: 16px;

  /* 左右中央配置 */
  margin: 0 auto; /* これだけで左右中央に */
}


.Strong-point3 {
  display: flex;
  justify-content: center; /* 横中央揃え */
  margin: 50px;
}




.strong-point3{
  font-size:20px;
  font-weight:700;
  color: #8c6b5e;
  text-align: center;
}

.text-box3 {
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
  text-align: justify;
  text-justify: inter-ideograph;
  font-family: 16px;
  margin: 0 auto;
}


.skills{
 color:#d8c0a4;;
  font-size:40px;
  margin-top:180px;
  margin-bottom: 10px;
  text-align:left;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto; /* ← これでブロック自体を中央配置 */
}



.photoshop {
  color: #d8c0a4;
  font-size: 30px;
  text-align: left;   /* ← これで左揃え */
  margin-bottom: 0px;
}

.vscode {
  color: #d8c0a4;
  font-size: 30px;
  text-align: left;   /* ← これで左揃え */
  margin-bottom: 0px;
}

.tb2,.tb3,.tb5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ← 子要素を左揃え */
  width: 800px;
  margin: 0 auto 30px; /* 800pxの箱を中央に */
}

.tb4 {
display: flex;
  flex-direction: column;
  align-items: flex-start; /* ← 子要素を左揃え */
  width: 800px;
  margin: 0 auto 100px; 
}

.tb1{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ← 子要素を左揃え */
  width: 800px;
  margin:100px auto 30px;
}

.Skills {
  width: 100%;
  max-width: 1000px;
  margin: 100px auto 0;
}

.skills-container {
  background-color: #f9ecdc;
  width: 1000px;
  padding: 100px 5%; /* 上下左右に余白を作る */
  border-radius: 50% / 30%; /* 横 / 縦 の比率で丸め方を指定 */
  box-sizing: border-box; /* paddingを含めたサイズ計算 */
}

.tb1, .tb2, .tb3, .tb4, .tb5{
  display: flex;
  flex-direction: row; /* 横並び */
  align-items: center;
  gap: 15px;
}

.skill-icon {
  width: 50px;  /* アイコンの幅 */
  height: auto;
  flex-shrink: 0;
}

.text p {
  margin: 0 0 5px 0;
}



.career{
 color:#bc8a69;
  font-size:40px;
  margin-top:180px;
  margin-bottom: 10px;
  text-align:left;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto; /* ← これでブロック自体を中央配置 */
}

.timeline {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}

.circle-background {
  width: 450px;
  height: 450px;
  background-color: #d8c0a4;
  border:5px solid #c9a635;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;

  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央 */
}

.timeline .entry {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;              /* 円の内側に収まる幅 */
  flex-wrap: wrap;          /* 内容が長くても折り返す */
  margin-bottom: 5px;
  gap: 20px;
}

/* 年の列 */
.timeline .entry .date {
  width: 100px;             /* 年だけ固定幅 */
  text-align: left;
  flex-shrink: 0;
}

/* 内容の列 */
.timeline .entry .detail {
  flex: 1;
  text-align: left;
}

.flower2 {
  position: absolute;
  top: 100px;
  right: 40px;
  width: 150px; /* サイズ調整 */
  height: auto;
  pointer-events: none;

  transform: scaleX(-1) rotate(-30deg); /* 水平方向反転 + 右に15度傾ける */
  transform-origin: center bottom; /* 回転の中心を調整 */
}



/*contact*/
.contact-form {
  background-color: #f9ecdc;        /* 背景色 */
  border: 5px solid #d8c0a4;       /* 5pxの枠線 */
  padding: 30px;                    /* 内側余白 */
  max-width: 800px;                 /* フォーム幅制限 */
  margin: 200px auto;                /* 上下50px、左右中央 */
  box-sizing: border-box;
}

.contact-form p {
  display: flex;
  flex-direction: column;           /* 上に項目名、下に入力欄 */
  align-items: flex-start;          /* 左端に揃える */
  width: 90%;                       /* セットの幅を指定 */
  margin: 0 auto 15px;              /* 上0、左右中央、下15px */
  font-weight: 300;
}

.contact-form p span {
  display: block;                   /* 項目名を上に */
  margin-bottom: 5px;               /* 項目名と入力欄の間隔 */
  font-weight: 400;
}

/* 入力欄 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="contents"] {
  width: 100%;                      /* p幅に合わせる */
  padding: 10px;
  display: block;
  margin:  0 0 20px 0;                        /* 左揃え */
  border: 3px solid #d8c0a4;
  font-size: 16px;
  box-sizing: border-box;
}

.contact-form input[type="contents"] {
  height: 200px;
}

.contact-form textarea {
  width: 100%;             /* p幅に合わせる */
  height: 200px;          /* 高さ */
  padding: 10px;
  display: block;
  margin: 0;              /* 左揃え */
  border: 3px solid #d8c0a4;
  box-sizing: border-box;
  font-family: inherit;   /* 他の入力欄と同じフォント */
  font-size: 16px;
  resize: vertical;       /* 高さだけ変更可能 */
}


/* 送信ボタン */
.contact-form input[type="submit"] {
  background-color: #8c6b5e;
  color: white;
  padding: 10px 30px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-size:30px;
  font-weight: 600;
  width: 300px;
  transition: background-color 0.3s;
  display: block;
  margin: 50px auto 100px;              /* ボタンは中央 */
}

.contact-form input[type="submit"]:hover {
  background-color: #a26f54;
}


.contact-wrap {
  position: relative;
  display: block;      /* 幅を100%に */
  width: 100%;         /* 必要なら最大幅も指定 */
  max-width:800px;    /* フォームの最大幅 */
  margin: 0 auto;      /* 中央寄せ */
}

.form-flower {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px; /* 好きなサイズに調整 */
  height: auto;
  pointer-events: none; /* クリックなどを邪魔しない */
  transform: rotate(180deg);
}



/*footer*/
/* フッター全体の背景 */
.footer {
  background-color: #d8c0a4;
  width: 100%;         /* 100vwじゃなく100% */
  padding: 20px 0;
  margin: 0;           /* 念のため */
  box-sizing: border-box;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end; /* ←右寄せ */
}



.footer ul {
  display: flex;
  gap: 30px;                /* リスト間隔 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.footer a:hover {
  color: #bc8a69;
}


@media (max-width: 600px) {

     body {
    font-family: 'Zen Kaku Gothic New', sans-serif ;
    font-size:14px;
  }

  html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;  /* 横スクロールを無効にする */
  width: 100%;
}

  /* 全体ラップ */
  .innerWrap {
    width: 90%;
    margin: 0 auto;
    padding: 30px 10px;
  }

  
 .header-bg {
    height: 0px;           /* 高さを自動に */
    padding:0;        /* 上下の余白で文字を確保 */
    background-color: #fbe5cb;
    position: relative;
  }

 .hamburger-wrap {
  width: 100%;              /* 画面いっぱい */
  display: flex;             /* 横並び */
  justify-content: flex-end; /* 右端に寄せる */
  padding: 0 10px;           /* 横余白 */
  box-sizing: border-box;    /* パディング込みで幅計算 */
  overflow: hidden;          /* はみ出し防止 */
}

  .nav-menu {
  display: flex;             /* 横並び */
  flex-direction: row;       /* 横並び維持 */
  gap: 15px;                 /* 項目間隔 */
  margin: 0;                 /* 外側マージンリセット */
  padding: 0;                /* 内側パディングリセット */
  list-style: none;          /* デフォルトのリストマーク消す */
}

 .nav-menu a {
  font-size: 14px;   /* 小さめに調整 */
  white-space: nowrap; /* 改行せず横に並べる */
}
  
h2::after{
    content:"";
    display: block;
    background-color:#bc8a69;
    height:4px;
    width: 150px;
    margin:10px auto 0;
}

  /* 見出し */
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 40px;
    margin-top: 0px;
  }

  .header-line{
    margin-top: 0;
  }

  .profile {
    flex-direction: column;   /* 横並び → 縦並び */
    align-items: center;      /* 中央揃え */
    gap: 20px;                /* 写真とテキストの間隔 */
    margin: 30px auto;        /* 上下余白を少しコンパクトに */
  }

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url("images/Pari.JPG");
  background-size: 300%;   /* ← 数値を大きくするとズーム */
  background-position: 25% 65%; /* ← 中央寄せ */
  margin:20px 0 20px;
}

  .profile-text {
    max-width: 90%;           /* 横幅は画面に合わせる */
    text-align: center;       /* 中央寄せ */
    margin-top:0;
  }

  .name {
    font-size: 22px;          /* 名前は少し大きめ */
    margin: 0px 0 20px;           /* 上下に少し余白 */
  }

  .text-box {
    font-size: 14px;          /* 本文は少し小さめ */
    line-height: 1.6;
    margin: 0;                /* 左余白をなくす */
    text-align: justify;      /* 読みやすく整列 */
    width:200px;
  }

  .StrongPoint {
  color: #bc8a69;
  font-size: 40px;
  margin: 100px auto 0px auto; /* 上右下左 */
  text-align: left;
  max-width: 1000px;
  width: 90%;   /* 画面幅に応じて可変 */
  box-sizing: border-box; /* パディングを含めて幅を計算 */
}

.a {
  font-size: 16px;
  margin: 0 auto;
  text-align: left;
  max-width: 1000px;
  width: 90%;   /* 画面幅に応じて可変 */
  box-sizing: border-box;
}
 .fade-in {
    transform: translateY(50px); /* 下から少し大きめに移動 */
  }

  /* About-me */
/* スマホ用（max-width: 600px） */
  .About-me {
    width: 90%;                 /* 画面幅に合わせる */
    max-width: 400px;           /* 横幅の上限を固定 */
    padding: 60px 20px 120px;   /* 上下余白を調整 *   /* 縦に長い楕円を作る */
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    min-height: 600px; 
  }
.flower {
 display: none;
}

.sp1, .sp2, .sp3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; /* 横方向中央揃え */
  margin: 0;
  gap: 0;
}

.number {
  font-size: 40px;
  text-align: center;
  width: 100%;
  margin-top: 50px;   /* 上の余白を増やして下げる */
  margin-bottom: 10px;/* 下の余白 */
  position: relative;
  transform: none;    /* transform をリセット */
}

.text-box1, .text-box2, .text-box3 {
  margin: 0 auto 0 auto;  /* 上下マージンは number で調整済み */
  padding: 0;
  width: 90%;
  max-width: 250px;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.4;
  margin-bottom: 40px; /* ナンバーとぶつからないように余白確保 */
}


.text-box1 p, .text-box2 p, .text-box3 p {
  margin: 0;
  padding: 0;
}


 .About-me {
    border-radius: 90% / 20%;
}
  .skills-container {
    width: 90%;
    padding: 100px 5% 100px;
    border-radius: 80% / 30%;
    box-sizing: border-box;
    margin: 50px auto;
  }

  .tb1, .tb2, .tb3, .tb4, .tb5{
    flex-direction: row;      /* 横並び */
    align-items: flex-start;  /* 上揃え */
    width: 100%;              /* 画面幅いっぱいに */
    margin: 0 auto 50px;      /* 下余白 */
    gap: 10px;                /* アイコンとテキスト間 */
  }

  .tb1{
    margin-top:50px;
  }

  .skill-icon {
    width: 40px;               /* アイコンサイズ調整 */
    height: auto;
    flex-shrink: 0;            /* 縮まない */
  }

  .text {
    flex: 1;                   /* テキスト部分を残り幅いっぱいに */
  }

  .photoshop, .vscode {
    font-size: 24px;           /* 文字サイズ調整 */
    text-align: left; 
    margin-bottom:10px !important;;       /* 左揃え */
  }

  .timeline {
  max-width: 100%; /* 画面幅いっぱい */
  margin: 0 auto;  /* 横中央 */
  position: relative;
}

.circle-background {
  width: 350px;       /* 幅 */
  height: 350px;      /* 高さを同じに */
  border-radius: 50%; /* 正円 */
  margin: 50px auto;  /* 横中央 */
  background-color: #d8c0a4;
  border: 5px solid #c9a635;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}



  .timeline .entry {
  display: flex;
  flex-direction: row;   /* 横並び */
  justify-content: flex-start;
  align-items: center;
  gap: 0px;            /* 年と内容の間隔 */
  flex-wrap: nowrap;     /* 横並びを崩さない */
  
}

.timeline .entry .date {
  width: 80px;          /* 年の列の幅を固定 */
  flex-shrink: 0;       /* 縮まない */
  text-align: left;
}

.timeline .entry .detail {
  flex: 1;              /* 残りの幅を使う */
  text-align: left;
}


  .flower2 {
    top: 20%;
    right: 0%;
    width: 100px;
    transform: scaleX(-1) rotate(-30deg);
  }

  /* Contact */
  .contact-form {
    width: 95%;          /* 親コンテナいっぱい */
    max-width: 400px;     /* 大きな画面でも広がりすぎない */
    margin: 200px auto;    /* 上下マージンを少し減らす */
    padding: 20px;        /* 内側余白は少し広め */
    box-sizing: border-box; /* パディング込みで幅を計算 */
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="contents"],
  .contact-form textarea {
    width: 100%;          /* フォーム幅に合わせる */
    font-size: 14px;
    padding: 10px;        /* 内側余白で窮屈さを軽減 */
  }

.contact-form input[type="submit"] {
  width: 100%;          /* 幅はフォームに合わせる */
  max-width: 300px;     /* 最大幅は300pxに制限 */
  margin: 20px auto;    /* 上下の余白 */
  height: auto;         /* 高さ自動 */
  padding: 10px 0;      /* 上下の余白を調整 */
  font-size: 20px;      /* 文字サイズ調整 */
  border-radius: 9999px;
  cursor: pointer;
  display: block;
}


  .contact-form p span {
  display: block;
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 12px;  /* 小さく調整 */
}

  .form-flower {
    width: 100px;
  }

  /* 画像 */
  .forest,
  .natural-furnuture,
  .brunch,
  .mv {
    width: 90%;
    height: auto;
    margin: 20px auto;
    display: block;
  }

  /* ボタン */
  .btn-container,
  .btn-container2 {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .Visit-a-website,
  .Visit-a-portfolio {
    white-space: nowrap;
    padding: 10px 40px;
    font-size: 16px;
    border-radius: 9999px;
    text-decoration: none;
    color: white;
    background-color: #8c6b5e;
    transition: background-color 0.3s ease;
  }

  .Visit-a-website:hover,
  .Visit-a-portfolio:hover {
    background-color: #a07d6b;
  }

  /* 矢印配置 */
.image-wrap {
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  align-items: center;
}

.arrow {
  margin-left: 20px; /* 画像との距離 */
  width: 30px;
  height: auto;
}


     .footer {
    padding: 20px 10px;       /* 左右の余白 */
    box-sizing: border-box;   /* パディング込みで幅計算 */
  }

  .footer .footer-inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    flex-wrap: wrap;           /* 横幅が狭くても折り返す */
  }

  .footer ul {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end; /* ul内も右寄せ */
  }

  .footer a {
    font-size: 14px;
  }
}